<template>
    <div class="index" id="index">
        <!-- 顶部导航栏 -->
        <div v-show="scroll >= 90" class="top">宠物家园
        </div>
        <!-- 头部背景 小丸子 logo -->
        <div class="header">
            <img src="@/assets/logo.png" style="width:10rem;" alt="">
        </div>
        <!-- 上门喂猫，上门遛狗 -->
        <div class="go-home">
            <div class="feed-cat">
                <img src="@/assets/img/cat_index.png" alt="">
                <span>上门喂猫</span>
            </div>
            <div class="walk-dog">
                <img src="@/assets/img/dog_index.png" alt="">
                <span>上门遛狗</span>
            </div>
        </div>
        <!-- 上门服务 -->
        <div class="serve">
            <div class="serve-left">
                <img src="@/assets/img/fuwu.png" alt="">
            </div>
            <div class="serve-right">
                <div>
                    <span>已累计服务</span>
                    <span>21,239</span>
                    <span>截止{{ endDate }}</span>
                </div>
            </div>
        </div>
        <!-- 伴宠日志 -->
        <div class="daily">
            <span>伴宠日志</span>
            <span>
                <router-link :to="{ path: '/dailylist' }">查看全部<van-icon name="play" /></router-link></span>
        </div>

        <!-- 日志卡片 -->
        <DailyCard></DailyCard>

        <!-- 点击文字，跳转至所有日志列表 -->
        <div class="go-dailys">
            <router-link :to="{ path: '/dailylist' }">查看更多伴宠日志</router-link>
        </div>

    </div>
</template>

<script>
import DailyCard from '@/components/DailyCard.vue'
export default {
    components: {
        DailyCard
    },
    data() {
        return {
            scroll: '',   // 滑动距离
        }
    },
    computed: {
        endDate() {
            let date = new Date()
            return this.$moment(date).format('YYYY-MM-DD')
        }
    },
    methods: {
        // 监听滚动条事件
        handleScroll() {
            this.scroll = document.documentElement.scrollTop || document.body.scrollTop
        }
    },
    mounted() {
        window.addEventListener('scroll', () => {
            this.handleScroll()
        })
    }
}
</script>

<style lang="scss" scoped>
.index {
    position: relative;
    background-color: white;
    width: 37.5rem;

    .top {
        line-height: 4.6rem;
        height: 4.6rem;
        width: 100%;
        font-weight: bold;
        text-align: center;
        font-size: 1.6rem;
        position: fixed;
        top: 0;
        background-color: white;
        z-index: 1000;
        transition: 0.5s
    }

    // 头部
    .header {
        width: 100%;
        height: 22rem;
        background-image: url('@/assets/img/girl.png');
        background-size: 8rem;
        background-repeat: no-repeat;
        background-position: 50% 70%;
        background-color: #fde062;

        // logo
        img {
            position: absolute;
            top: 10rem;
            left: 2rem;
        }
    }

    .go-home {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        background-color: #fff;
        position: absolute;
        left: 1.75rem;
        top: 18rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 90%;
        height: 13rem;
        border-radius: 1.5rem;

        .feed-cat,
        .walk-dog {
            width: 50%;
            height: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                display: block;
                width: 6rem;
                margin-bottom: 1rem;
            }

            span {
                display: block;
                font-size: 1.6rem;
                font-weight: bold;
                color: #36343c;
            }
        }

        .feed-cat {
            border-right: 0.05rem solid #ccc;
        }

    }

    .serve {
        width: 100%;
        height: 22rem;
        display: flex;

        .serve-left {
            width: 50%;

            img {
                width: 6rem;
                padding-top: 11rem;
                padding-left: 10rem;
            }
        }

        .serve-right {
            width: 50%;
            padding-top: 10.5rem;

            span {
                display: block;
                margin: 1rem;
                font-size: 1.6rem;
                color: grey;
                text-align: left;
            }

            span:nth-child(2) {
                font-size: 2.4rem;
                color: red;
                font-family: "华光彩云_";
            }
        }
    }

    .daily {
        width: 100%;
        height: 5rem;
        display: flex;
        justify-content: space-between;

        span {
            display: block;
            line-height: 5rem;
        }

        span:first-child {
            font-weight: bold;
            font-size: 2.25rem;
            color: #36343c;
            padding-left: 2rem;
        }

        span:last-child {
            font-size: 1.4rem;
            color: grey;
            text-align: end;
            padding-right: 2rem;
        }
    }

    .go-dailys {
        height: 10rem;
        text-align: center;

    }

}
</style>